* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: #795548;
  padding: 3px;
  user-select: none;
}

.game-container {
  max-width: 540px;
  margin: auto;
  position: relative;
}

.game-wrapper.upside {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.game-wrapper canvas.game-ui {
  display: block;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.game-controller {
  width: 4em;
  height: 4em;
  position: relative;
  margin: 4.2em auto 0;
}

.game-controller a {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,0,.3) url(img/up.png) no-repeat 50% 50%/80%;
  opacity: .6;
  border-radius: 6px;
}

.game-controller a.up {
  left: 0;
  top: -78%;
}

.game-controller a.right {
  transform: rotate(90deg);
  left: 78%;
  top: 0;
}

.game-controller a.down {
  transform: rotate(180deg);
  left: 0;
  top: 78%;
}

.game-controller a.left {
  transform: rotate(270deg);
  left: -78%;
  top: 0;
}